<template>
  <div class="app-container" style="padding: 5px;">
    <el-container>
      <el-aside :class="isShow ? 'max-width' : 'min-width'">
        <div class="expand" @contextmenu.prevent="handleExpand" @click="handleExpand">
          <i :class="isShow ? 'el-icon-caret-left' : 'el-icon-caret-right'"></i>
        </div>
        <div class="left-content" v-show="isShow">
          <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" :loading="loading">添加
              </el-button>
              <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handlerBatchDelete"
                :loading="loading" title="清除空目录">清除
              </el-button>
            </el-col>
          </el-row>

          <el-collapse>
            <el-collapse-item v-for="item in dataArr" :key="item.id" :title="item.name" :name="item.id">
              <el-table :ref="item.id" @row-click="handleRowClick" :data="item.children" :show-header="false"
                style="width: 100%">
                <el-table-column prop="name" label="名称" width=""></el-table-column>
                <el-table-column align="right">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit-outline" size="mini"
                      @click="() => handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button style="color: red;" type="text" icon="el-icon-delete" size="mini"
                      @click="() => deleteRow(scope.$index, scope.row)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
          <!--编辑框-->
          <info-dialog v-if="dialogVisible" :handle-type="handleType" :dialog-visible="dialogVisible"
            :dialog-data="dialogData" :parent-id="parentId" :grand-parent-id="grandParentId" @closed="dialogClose"
            @refresh="refreshLoadTree" @refreshAll="load" />
        </div>
      </el-aside>

      <el-main style="padding: 0;">
        <template>
          <div style="height:100%;">
            <mavon-editor ref=mdedit style="height: 85vh;" v-model="fromData.desc" @save="mavonSave" @change="change"
              :scrollStyle="true" :ishljs="true" @imgAdd="imgAdd">
              <template slot="left-toolbar-after">
                <button type="button" @click="() => addTips('success')" class="toolbar-button" aria-hidden="true"
                  title="tip-success"><i class="el-icon-success"></i></button>
                <button type="button" @click="() => addTips('info')" class="toolbar-button" aria-hidden="true"
                  title="tip-info"><i class="el-icon-info"></i></button>
                <button type="button" @click="() => addTips('warning')" class="toolbar-button" aria-hidden="true"
                  title="tip-warning"><i class="el-icon-warning"></i></button>
                <button type="button" @click="() => addTips('danger')" class="toolbar-button" aria-hidden="true"
                  title="tip-danger"><i class="el-icon-error"></i></button>
              </template>
            </mavon-editor>
          </div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import {
    loadAPIs,
    saveAPI,
    deleteAPI,
    uploadImage,
    deleteImages,
    deleteFolders
  } from '@/api/cloud/docApi'
  import {
    isOk
  } from '@/utils/request'
  import {
    addTips
  } from '@/utils/mavon'
  import {
    mavonEditor
  } from 'mavon-editor'
  import tips from 'markdown-it-tips'
  import 'mavon-editor/dist/css/index.css'
  import InfoDialog from './components/InfoDialog.vue'

  export default {
    name: 'docApi',
    components: {
      InfoDialog,
      mavonEditor
    },
    data() {
      return {
        queryForm: {
          keywords: undefined,
          rootId: '0'
        },
        maps: new Map(),
        dataArr: [],
        status: 0,
        images: '',
        loading: false,
        isShow: true,
        dialogVisible: false,
        dialogData: {},
        /* 0-新增  1-编辑  2-新增子菜单  3-添加权限点*/
        handleType: '',
        parentId: '',
        grandParentId: '',
        activeName: '1',
        fromData: {
          id: '',
          name: '',
          desc: '',
          deschtml: ''
        }
      }
    },
    computed: {},
    mounted() {
      this.$refs.mdedit.markdownIt.use(tips, {
        links: false
      })
    },
    created() {
      this.load()
    },
    methods: {
      load(tree, treeNode, resolve) {
        loadAPIs().then(rsp => {
          if (isOk(rsp)) {
            this.dataArr = rsp.result
          }
        })
      },
      dialogClose: function(e) {
        /* 关闭弹窗 */
        this.dialogVisible = e
        this.dialogData = {}
      },
      dialogShow: function(e) {
        /* 打开弹窗 */
        this.dialogVisible = true
      },
      handleAdd: function() {
        this.dialogShow()
        //this.handleType = 'M'
        this.parentId = ''
        this.options = this.dataArr
      },
      handleEdit: function(node, row) {
        /* 编辑 */
        this.dialogShow()
        this.handleType = '1'
        this.parentId = row.parentId
        Object.assign(this.dialogData, row)
      },
      handlerBatchDelete: function() {
        deleteFolders().then(response => {
          let type= "warning"
          if (isOk(response)){
            type = 'success'
            this.load()
          }
          this.$message({
            message: response.result,
            type: type,
            duration: 500
          })
        })
      },
      handleNodeClick: function(row, column, event) {
        cosole.log('123213')
        if (this.status == 0 && this.images) {
          //删除图片
          deleteImages({
            ids: this.images.substring(0, this.images.length - 1)
          }).then(rsp => {
            if (isOk(rsp)) {
              this.status = 0
              this.images = ''
            }
          })
        }
        if (row.type == 'C') {
          this.fromData.id = row.id
          this.fromData.name = row.name
          this.fromData.desc = row.desc || ''
          this.fromData.deschtml = row.deschtml || ''
        }
      },
      deleteRow: function(node, rows) {
        /* 删除行 */
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAPI({
            id: rows.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            })
            const {
              parentId
            } = rows // 取出当前删除行的父节点id
            const parentIds = '' + parentId
            if (parentIds === '0') {
              this.queryForm.rootId = '0'
              this.load()
            } else {
              this.refreshLoadTree(parentIds)
            }
          })
        })
      },
      refreshLoadTree: function(parentId, grandParentId) {
        /* 局部刷新列表 */
        if (this.maps.get(parentId)) {
          const {
            tree,
            treeNode,
            resolve
          } = this.maps.get(parentId) // 根据父节点id取出对应的节点数据
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, []) // 将对应节点下的数据清空，从而实现数据的重新加载
          this.load(tree, treeNode, resolve)
        } else {
          if (this.maps.get(grandParentId)) {
            const {
              tree,
              treeNode,
              resolve
            } = this.maps.get(grandParentId)
            this.$set(this.$refs.table.store.states.lazyTreeNodeMap, grandParentId, [])
            this.load(tree, treeNode, resolve)
          } else {
            this.load()
          }
        }
      },
      mavonSave: function(value, render) {
        this.fromData.desc = value;
        this.fromData.deschtml = render;
        saveAPI(this.fromData).then(rsp => {
          if (isOk(rsp)) {
            this.status = 1;
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.load()
          }
        })
      },
      change: function(value, render) {},
      imgAdd: function(pos, file) {
        uploadImage({
          file: file
        }).then(res => {
          if (res.code == 200) {
            this.$refs.mdedit.$img2Url(pos, process.env.VUE_APP_BASE_API + '/API/OPEN/thumbnail/' + res.result)
          }
        });
      },
      addTips: function(e) {
        addTips(this.$refs.mdedit, e);
      },
      handleExpand: function() {
        this.isShow = !this.isShow
      },
      handleRowClick: function(row, column, event) {
        if (this.status == 0 && this.images) {
          //删除图片
          deleteImages({
            ids: this.images.substring(0, this.images.length - 1)
          }).then(rsp => {
            if (isOk(rsp)) {
              this.status = 0
              this.images = ''
            }
          })
        }
        if (row.type == 'C') {
          this.fromData.id = row.id
          this.fromData.name = row.name
          this.fromData.desc = row.desc || ''
          this.fromData.deschtml = row.deschtml || ''
        }
      }
    }

  }
</script>


<style lang="scss">
  .el-aside {
    padding: 0;
    padding-right: 17px;
    position: relative;
    border: 1px solid #eaeefb;
    background: none;
    margin-left: 5px;
    margin-bottom: 0;

    //position: relative;
    .expand {
      width: 17px;
      height: 100%;
      // background-color: lightblue;
      background-color: #fff;
      color: #d3dce6;
      position: absolute;
      // border-top-left-radius: 25px;
      // border-bottom-left-radius: 25px;
      right: 0;
      // top: 25%;
      border-left: 1px solid #eaeefb;

      >i {
        position: absolute;
        top: 40%;
      }

      &:hover {
        cursor: pointer;
        color: #409eff;
        background-color: #f9fafc;
      }
    }
  }

  .max-width {
    width: 380px !important;
  }

  .min-width {
    width: 17px !important;
  }

  .el-main {
    padding-top: 0px;
    border-left: 1px solid #eaeefb;
  }

  .el-collapse-item__header,.el-collapse-item__wrap {
    padding-left: 10px;
  }

  .el-collapse-item__content {
    padding-bottom: 1px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .show-hide:hover :nth-child(2) {
    display: inline-block !important;
  }


  .toolbar-button {
    background-color: #f5f7fa00;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    height: 28px px;
    width: 28px;
    margin: 6px 0 5px 0px;
    font-size: 14px;
    padding: 4.5px 6px 5px 3.5px;
    color: #757575;
    border-radius: 5px;
    text-align: center;
    background: none;
    border: none;
    outline: none;
    line-height: 1;

    >i {
      width: 0.875rem;
      height: 0.875rem;
      margin: 0 2.8px;
    }
  }

  .md-tip {
    background-color: #f2f6fc;
  }

  .md-tip p {
    border-bottom-right-radius: 2px;
    padding: 14px 30px;
    position: relative;
    font-size: 14px;
    margin: 14px 0;
  }

  .md-tip p::before {
    border-radius: 100%;
    color: #fff;
    content: "!";
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    left: -12px;
    line-height: 20px;
    position: absolute;
    height: 20px;
    width: 20px;
    text-align: center;
    top: 14px;
  }

  .md-tip-success {
    color: #67c23a;
    border-left: 4px solid #67c23a;

    >p {
      &::before {
        background-color: #67c23a;
      }
    }
  }

  .md-tip-info {
    color: #1890ff;
    border-left: 4px solid #1890ff;

    >p {
      &::before {
        background-color: #1890ff;
      }
    }
  }

  .md-tip-warning {
    color: #e6a23c;
    border-left: 4px solid #e6a23c;

    >p {
      &::before {
        background-color: #e6a23c;
      }
    }
  }

  .md-tip-danger {
    color: #f56c6c;
    border-left: 4px solid #f56c6c;

    >p {
      &::before {
        background-color: #f56c6c;
      }
    }
  }

  .md-tip-error {
    color: #f56c6c;
    border-left: 4px solid #f56c6c;

    >p {
      &::before {
        background-color: #f56c6c;
      }
    }
  }
</style>
